<template>
    <el-container>
        <el-header class="pdbt rigtop">
          <i class="fa el-icon-s-unfold" @click="clickFold" v-if="iconIf"></i> 
          <i class="fa el-icon-s-fold" @click="clickFold" v-if="!iconIf"></i>
          审核公式信息
        </el-header>
        
        <div class="padding_top height">
            <el-form ref="elForm" :model="bnjsData" :rules="rules" size="medium" label-width="90px"
          label-position="right">
            <el-form-item label="作用范围" prop="field101">
                <el-radio-group v-model="bnjsData.field101" size="mini" :disabled='true'>
                <el-radio v-for="(item, index) in field101Options" :key="index" :label="item.value"
                    :disabled="item.disabled">{{item.label}}</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="公式类型" prop="field102">
                <el-radio-group v-model="bnjsData.field102" size="mini">
                <el-radio v-for="(item, index) in field102Options" :key="index" :label="item.value"
                    :disabled="item.disabled">{{item.label}}</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="有效性" prop="field103">
                <el-radio-group v-model="bnjsData.field103" size="mini">
                <el-radio v-for="(item, index) in field103Options" :key="index" :label="item.value"
                    :disabled="item.disabled">{{item.label}}</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-row type="flex" justify="start" align="bottom" class="el_row_btn">
                <el-form-item label-width="5px" label="" prop="field159">
                  <el-button type="primary" icon="el-icon-plus" size="mini" @click="czfClick(' + ')"></el-button>
                </el-form-item>
                <el-form-item label-width="5px" label="" prop="field158">
                  <el-button type="primary" icon="el-icon-minus" size="mini" @click="czfClick(' - ')"></el-button>
                </el-form-item>
                <el-form-item label-width="5px" label="" prop="field156">
                  <el-button type="primary" icon="el-icon-close" size="mini" @click="czfClick(' * ')"></el-button>
                </el-form-item>
                <el-form-item label-width="5px" label="" prop="field164">
                  <el-button type="primary" size="mini" @click="czfClick(' / ')">÷</el-button>
                </el-form-item>
                <el-form-item label-width="5px" label="" prop="field165">
                  <el-button type="primary" size="mini" @click="czfClick(' ( ')">（</el-button>
                </el-form-item>
                <el-form-item label-width="5px" label="" prop="field166">
                  <el-button type="primary" size="mini" @click="czfClick(' ) ')">）</el-button>
                </el-form-item>
                <el-form-item label-width="5px" label="" prop="field167">
                  <el-button type="primary" size="mini" @click="czfClick(' { ')">{</el-button>
                </el-form-item>
                <el-form-item label-width="5px" label="" prop="field168">
                  <el-button type="primary" size="mini" @click="czfClick(' } ')">}</el-button>
                </el-form-item>
            </el-row>
            <el-row type="flex" justify="start" align="bottom" class="el_row_btn">
                <el-form-item label-width="5px" label="" prop="field170">
                  <el-button type="primary" size="mini" @click="czfClick(' && ')">&</el-button>
                </el-form-item>
                <el-form-item label-width="5px" label="" prop="field171">
                  <el-button type="primary" size="mini" @click="czfClick(' || ')">||</el-button>
                </el-form-item>
                <el-form-item label-width="5px" label="" prop="field172">
                  <el-button type="primary" size="mini" @click="czfClick(' > ')">></el-button>
                </el-form-item>
                <el-form-item label-width="5px" label="" prop="field173">
                  <el-button type="primary" size="mini" @click="czfClick(' >= ')">>=</el-button>
                </el-form-item>
                <el-form-item label-width="5px" label="" prop="field174">
                  <el-button type="primary" size="mini" @click="czfClick(' == ')">==</el-button>
                </el-form-item>
                <el-form-item label-width="5px" label="" prop="field175">
                  <el-button type="primary" size="mini" @click="czfClick(' < ')">＜</el-button>
                </el-form-item>
                <el-form-item label-width="5px" label="" prop="field176">
                  <el-button type="primary" size="mini" @click="czfClick(' <= ')">＜＝</el-button>
                </el-form-item>
                <el-form-item label-width="5px" label="" prop="field177">
                  <el-button type="primary" size="mini" @click="czfClick(' != ')">!=</el-button>
                </el-form-item>
            </el-row>
            <el-form-item label-width="5px" label="" prop="field178">
                <el-input ref="m_input" v-model="inputOne" type="textarea" placeholder="请输入表内审核公式······"
                :autosize="{minRows: 10, maxRows: 1000}" :style="{width: '100%'}"></el-input>
            </el-form-item>
            <el-form-item label-width="5px" label="" prop="field179">
                <el-input ref="n_input" v-model="inputTwo" type="textarea" placeholder="请输入审核解释······"
                :autosize="{minRows: 7, maxRows: 1000}" :style="{width: '100%'}"></el-input>
            </el-form-item>
            </el-form>
          </div>
          <el-footer style="text-align: center;">
                  <el-button size="mini" type="primary" @click="submitForm">保存</el-button>
                  <!-- <el-button size="small" @click="clearForm">重置</el-button> -->
          </el-footer>
        
    </el-container>
</template>
<script>
import waves from '@/directive/waves/index.js' // 水波纹指令
import { isNull } from 'xe-utils/methods';
  export default {
    components: {
      waves
    },
     props: {
       moZbParam: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },
    watch: {
      moZbParam: {
        handler(data) {
          this.moZbData = data;
          this.rwValue=data.rwValue;
          this.ywValue=data.ywValue;
          this.tableID=data.treeID;
          //this.bnjsData.field101 = "2";监听的同时改变右侧编辑模块的作用范围指标的选择
        },
        deep: true,
        immediate:true
      },
    },
    data() {
      return {
        iconIf: false,
        // isFold: '0',
        isFoldz: '',
        //滑出窗口
        taskData: [],// 任务数据
        drawer: false,
        strType:"",
        direction: 'rtl',
        taskFormData:{},
        editTableData:{},
        moZbData:"",
        inputOne:"",
        inputTwo:"",
        rwValue:"",
        ywValue:"",
        fuuid:"",
        tableID:"",
        bnjsData: {
          field101: '1',
          field102: "MC",
          field103: '1',
        },
        rules: {
          field102: [{
            required: true,
            message: '公式类型不能为空',
            trigger: 'change'
          }],
          field103: [{
            required: true,
            message: '有效性不能为空',
            trigger: 'change'
          }],
        },
        field101Options: [{
          "label": "表内",
          "value": '1'
        }, {
          "label": "表间",
          "value": '2'
        }],
        field102Options: [{
          "label": "合理性",
          "value": "RC"
        }, {
          "label": "强制性",
          "value": "MC"
        }],
        field103Options: [{
          "label": "有效",
          "value": '1'
        }, {
          "label": "无效",
          "value": '0'
        }],
      }
    },
    computed: {},
    methods: {
      clickFold() {
          // this.isFold = !this.isFold
          // console.log('Before-----'+this.isFold)
          if(this.isFold==='1'){
            this.isFold = '0'
            this.iconIf = false
          }else{
            this.isFold = '1'
            this.iconIf = true
          }
          this.isFoldz = this.isFold
          this.$emit('myclickFold', this.isFoldz)
          // console.log('After-----'+this.isFold)
      },
      submitForm() {
        let str = this.$refs.m_input.$refs.textarea.value;
        if(str == "" || str == null){
          this.$message.warning("审核公式不能够为空！");
          return false;
        }
        this.$emit("saveButton",this.bnjsData.field102,this.bnjsData.field103,this.$refs.m_input.$refs.textarea.value,this.$refs.n_input.$refs.textarea.value,this.strType,this.fuuid);
      },
      resetForm() {
        this.strType = "add";
        this.$refs.m_input.$refs.textarea.value = "";
        this.$refs.n_input.$refs.textarea.value = "";
      },
      clearForm(){
        this.$refs.m_input.$refs.textarea.value = "";
        this.$refs.n_input.$refs.textarea.value = "";
      },
      setData(strNum){//用户列表点击一列赋值使用(先清空再赋值)
        if(strNum.type == "update")
        {
          this.fuuid = strNum.val.fuuid;
          this.strType = "update";
          this.bnjsData.field102 = strNum.val.ft;
          this.bnjsData.field103 = strNum.val.fValid;
          this.inputOne = strNum.val.fc;
          this.inputTwo = strNum.val.fd;
        }else{
          this.strType = "add";
        }
      },
      //运算符按钮事件
      czfClick(strNum){//用于追加或插入计算符号或要审核字段名称
        const myField = this.$refs.m_input.$refs.textarea;
        if (myField.selectionStart || myField.selectionStart === 0) {
          let startPos = myField.selectionStart;
          let endPos = myField.selectionEnd;
          myField.value = myField.value.substring(0, startPos) + strNum + myField.value.substring(endPos, myField.value.length);
          myField.focus();
          myField.selectionStart = startPos + strNum.length;
          myField.selectionEnd = startPos + strNum.length;
        } else {
          this.inputOne += strNum
        }
      },
      setIsFold(){
        this.isFold = '1';
        this.iconIf = true;
        this.isFoldz = this.isFold;
        this.$emit('myclickFold', this.isFoldz);
      },
    }
  }
</script>
<style lang="scss" scoped>
.padding_top .el-form{
  padding: 0 10px;
}
.padding_top{
     max-height: calc(100% - 80px);
    overflow: auto;
}

.el_row_btn .el-button--mini{
  padding:4px 6px;
  width:100%;
}
.padding_top .el_row_btn .el-form-item{
  margin-bottom: 0px;
  flex: 1;
  margin-top:0;
}
.padding_top .el-form-item{
  margin-top: 6px;
  margin-bottom: 6px;
}
.padding_top .el-textarea{
  margin-top: 8px;
  margin-bottom: 8px;
}
::v-deep .el-form-item--medium .el-form-item__label{
  text-align: right;
}
::v-deep .padding_top .el-form-item--medium .el-form-item__content{
  line-height: 30px;  text-align: left;
}
</style>
